<template>
  <div class="qunti">
    <div class="team">
      <div class="powertop">
        <router-link class="powertopli" to="/yonghuyunying/qunti">用户群体管理</router-link>
        <router-link class="powertopli" to="/yonghuyunying/guanli">用户管理</router-link>
      </div>
    </div>
    <div style="padding: 35px 20px;">
      <div class="kflexc" style="margin-bottom: 20px;">
        <el-input v-model="search.mobile" style="width: 280px; margin-right: 20px;" placeholder="联系电话"></el-input>
        <el-input v-model="search.plan_mobile_produced" style="width: 280px; margin-right: 20px;" placeholder="生产号码"></el-input>
        <el-select v-model="search.age" style="width: 280px; margin-right: 20px;" placeholder="年龄">
          <el-option value="16-20" label="16-20"></el-option>
          <el-option value="20-30" label="20-30"></el-option>
          <el-option value="30-60" label="30-60"></el-option>
          <el-option value="60以上" label="60以上"></el-option>
        </el-select>
        <el-button round @click="searchs" type="primary" plain style="margin-right: 20px;">搜索</el-button>

        <el-upload ref="upload" action="#" :before-upload="uploasd2" :show-file-list="false" accept=".xlsx,.xls">
           <el-button type="danger" round style="margin-right: 20px;">导入</el-button>
        </el-upload>


        <div style="margin-left: 10px; color: #999; font-size: 12px; cursor: pointer;" @click="xiazai">下载模板</div>


        <!-- <el-button round @click="xinjian" type="danger" plain>新建人群圈选</el-button>
        <el-button round @click="goid('/order_export_yunying')" type="primary" plain>查看导出明细</el-button> -->
      </div>


      <el-table :data="list" border style="width: 100%">
        <el-table-column align='center' prop='id_card_name' label="姓名"></el-table-column>
        <el-table-column align='center' prop='mobile' label="联系电话"></el-table-column>
        <el-table-column align='center' prop='plan_mobile_produced' label="生产号码"></el-table-column>
        <el-table-column align='center' prop='is_qiwei' label="企微客户">
          <template slot-scope="scope">
            <div v-if="scope.row.is_qiwei == 1">否</div>
            <div v-if="scope.row.is_qiwei == 2">是</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='age' label="年龄"></el-table-column>
        <el-table-column align='center' prop='sex' label="性别"></el-table-column>
        <el-table-column align='center' prop='order_count' label="下单数量"></el-table-column>
       <el-table-column align='center' prop='classname' label="用户类别"></el-table-column>
       <el-table-column align='center' prop='type' label="用户来源"></el-table-column>
        <el-table-column align='center' label="操作" width="220px">
          <template slot-scope="scope">
            <div class="kflexc">
              <el-button type="text" @click="bianji(scope.row)">编辑</el-button>
              <el-button @click="daochu(scope.row)" type="text" style="margin-left: 10px;">导出明细</el-button>
              <!-- <el-button type="text" @click="shanchu(scope.row)">删除</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="total,prev,pager,next" style="text-align: right; padding: 20px;" prev-text="上一页" next-text="下一页" :current-page="search.page" @current-change="fanye"
        :page-size="search.page_size" :total="total"></el-pagination>
    </div>


    <!-- <el-dialog :title="jieguo.name" center class="log" :visible.sync="jieguo.log" width="510px">
    	<el-table :data="jieguo.list" border style="width: 100%">
    	  <el-table-column align='center' prop='name' label="任务名称"  v-if="jieguo.type == 1 || jieguo.type == 2"></el-table-column>

        <el-table-column align='center' prop='total_num' label="发送人数" v-if="jieguo.type == 1"></el-table-column>
        <el-table-column align='center' prop='succ_num' label="成功人数" v-if="jieguo.type == 1"></el-table-column>

        <el-table-column align='center' prop='total' label="任务总数" v-if="jieguo.type == 2"></el-table-column>
        <el-table-column align='center' prop='call_num' label="已拨打人数" v-if="jieguo.type == 2"></el-table-column>
        <el-table-column align='center' prop='li' label="拨通率" v-if="jieguo.type == 2"> </el-table-column>

        <el-table-column align='center' prop='add_friend_success_amount' label="添加人数" v-if="jieguo.type == 3"></el-table-column>
        <el-table-column align='center' prop='add_friend_amount' label="有效人数" v-if="jieguo.type == 3"></el-table-column>
    	</el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="jieguo.log = false">关闭</el-button>
      </span>
    </el-dialog> -->

    <el-dialog title="编辑" center :visible.sync="log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false" >

      <div class="kflexc" style="margin-top: 20px;">
        <el-input placeholder="请输入姓名" style="width: 400px; " v-model="bianjiall.id_card_name"></el-input>
      </div>
      <div class="kflexc" style="margin-top: 20px;">
        <el-input placeholder="请输入身份证号" style="width: 400px; " v-model="bianjiall.id_card_num"></el-input>
      </div>
      <div class="kflexc" style="margin-top: 20px;">
        <el-input placeholder="请输入手机号" style="width: 400px; " v-model="bianjiall.mobile"></el-input>
      </div>
      <div class="kflexc" style="margin-top: 20px;">
        <el-input placeholder="请输入省" style="width: 400px; " v-model="bianjiall.province"></el-input>
      </div>
      <div class="kflexc" style="margin-top: 20px;">
        <el-input placeholder="请输入市" style="width: 400px; " v-model="bianjiall.city"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="log = false">关闭</el-button>
        <el-button type="primary" round @click="queding()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import {
    read,
    utils
  } from 'xlsx'
  import axios from "axios";
  export default {
    name: 'qunti',
    data() {
      return {
        bianjiall:{
          id:"",
          id_card_num:"",
          id_card_name:"",
          mobile:"",
          province:"",
          city:""
        },
        search:{
          page:1,
          page_size:20,
          mobile:"",
          age:"",
          plan_mobile_produced:""
        },
        total:0,
        list:"",
        jieguo:{
          name:"人群短信通知结果",
          log:false,
          list:"",
          type:0,
          name2:""
        },
        fenleilist:"",
        log:false
      }
    },
    created() {
      this.getlist()

    },
    methods:{
      bianji:function(item){
        this.bianjiall = {
          id:item.id,
          id_card_num:item.id_card_num,
          id_card_name:item.id_card_name,
          mobile:item.mobile,
          province:item.province,
          city:item.city
        }
        this.log = true
      },
      queding:function(){
        axios.post("/api/plan-market/crowd/edit/fans/info",this.bianjiall)
          .then( response => {
            if (response.data.msg.code == 0) {
              this.$message.success('修改成功');
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daochu:function(item){
        axios.post("/api/plan-market/crowd/export/fans",{id:item.id})
          .then( response => {
            if (response.data.msg.code == 0) {
              this.$router.push('/order_export_yunying2')
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //下载模板
      xiazai: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '导入管理.xlsx');
        a.setAttribute('href',location.origin + location.pathname + 'static/daoruguanli.xlsx');
        a.click();
      },
      readExcel1(files) {

        return new Promise((res, rej) => {
          var that = this;
          if (files.length <= 0) {
            return;
          }
          if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
            this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
            return;
          }
          const fileReader = new FileReader();

          fileReader.onload = (ev) => {

            try {
              const data = ev.target.result;
              const workbook = read(data, {
                type: 'binary'
              });
              // 取第一张表
              const wsname = workbook.SheetNames[0];
              // 生成json表格内容
              const ws = utils.sheet_to_json(workbook.Sheets[wsname]);

              // 后续为自己对ws数据的处理
              res(ws)
            } catch (e) {

              return false;

              rej(e)
            }
          };
          fileReader.readAsBinaryString(files[0]);
        })

      },
      uploasd2(file, fileList) {

        var that = this
        let files = {
          0: file
        }
        let data = []

        let ff = this.readExcel1(files);

        ff.then((res) => {

          res.forEach(item => {
            let obj = {
              id_card_num: item['身份证'],
              id_card_name: item['姓名'],
              mobile: item['手机号'],
              province: item['收货省'],
              city: item['收货市']
            }
            data.push(obj)

          })

          axios.post('/api/plan-market/crowd/import/fans',{data:data})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`导入成功`);
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      shanchu:function(item){
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	axios.get('/api/plan-market/crowd/del?id='+item.id)
        	  .then(response => {
        			if(response.data.msg.code == 0){
        				this.$message({
        					type: 'success',
        					message: '删除岗位成功!'
        				});
        				this.getlist()

        			}else{
        				this.$message.error(response.data.msg.info);
        			}
        	  })
        })
      },


      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },
      searchs:function(){
        this.search.page = 1
        this.getlist()
      },
      getlist:function(){
        axios.post("/api/plan-market/crowd/fans/list",this.search)
          .then( response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .qunti{
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }

    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }

    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }

    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
  }
</style>
